<?php
$this->load->view(
	'admin/layout/head', array(
	'title'=>'后台管理',
	'nav' => 'product'
),
	FALSE);
switch ($this->session->admin_language) {
	case 'chinese':
		$prefix = '';
		break;
	case 'english':
		$prefix = 'en_';
		break;
	default:
		$prefix = '';
		break;
}
?>

<style>
	.mt-20 label {
		width: 100px;
	}

	.mt-20 .form-control {
		width: 250px;
	}
</style>

<div id="container">
	<a @click="showCreate" class="btn btn-info"><?= $this->lang->line('create') ?></a>
	<table class="table table-bordered table-striped table-hover scroll-table mt-20">
		<thead>
			<tr>
				<th width="200" class="text-center">id</th>
				<th width="140" class="text-center">名称</th>
				<th width="200" class="text-center">地址</th>
				<th width="80" class="text-center">电话</th>
				<th width="100" class="text-center">联系人</th>
				<th width="100" class="text-center">时间</th>
				<th><?= $this->lang->line('actions') ?></th>
			</tr>
		</thead>
		<tbody>
				<tr v-for="(item, index) in suppliers" :key="item.id">
					<td>{{ item.id }}</td>
					<td>{{ item.title }}</td>
					<td>{{ item.address }}</td>
					<td>{{ item.tel }}</td>
					<td>{{ item.name }}</td>
					<td>{{ item.create_time }}</td>
					<td>
						<button @click="showEdit(item, index)" class="btn btn-primary"><?= $this->lang->line('edit') ?></button>
						<button @click="deleteItem(item, index)" class="btn btn-danger"><?= $this->lang->line('delete') ?></button>
					</td>
				</tr>
		</tbody>
		<?php if ($suppliers->last_page > 1): ?>
			<tfoot>
				<td colspan="4" style="text-align:right">
					<?= $suppliers->render() ?>
				</td>
			</tfoot>
		<?php endif ?>
	</table>

	<div class="modal fade in" :style="{display: editShow ? 'block' : 'none' }" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" @click="editShow = false" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">{{ saveForm.id ? saveForm.title : '<?= $this->lang->line('create') ?>' }}</h4>
				</div>
				<div class="modal-body">
					<form class="form-inline">
						<div class="mt-20">
							<label for="">名称</label>
							<input type="text" class="form-control" v-model="saveForm.title">
						</div>
						<div class="mt-20">
							<label for="">地址</label>
							<input type="text" class="form-control" v-model="saveForm.address">
						</div>
						<div class="mt-20">
							<label for="">电话</label>
							<input type="text" class="form-control" v-model="saveForm.tel">
						</div>
						<div class="mt-20">
							<label for="">联系人</label>
							<input type="text" class="form-control" v-model="saveForm.name">
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" @click="save" class="btn btn-primary"><?= $this->lang->line('save') ?></button>
					<button type="button" @click="cancelEdit" class="btn btn-default" data-dismiss="modal"><?= $this->lang->line('cancel') ?></button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
</div>

<?php 
$this->load->view('admin/layout/footer', ['js'=>['/assets/select2/js/select2.full.min.js']]);
?>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
var app = new Vue({
	el: '#container',
	data: {
		suppliers: JSON.parse('<?= json_encode($suppliers->data()) ?>'),
		editShow: false,
		saveForm: {

		}
	},
	methods: {
		showCreate: function () {
			this.editShow = true;
		},
		showEdit: function (item, index) {
			this.editShow = true;
			this.$set(this, 'saveForm', Object.assign({}, item, {index: index}));
		},
		save: function () {
			var self = this;
			for(var key in this.saveForm) {
				if (!this.saveForm[key]) {
					// alert('请完善表单');
					// return;
				}
			}
			$.ajax({
				url: '/admin/supplier/save/'+(this.saveForm.id || ''),
				type: 'post',
				data: this.saveForm,
				success: function (data) {
					Toast.success('保存成功');

					if (self.saveForm.id) {
						self.suppliers.splice(self.saveForm.index, 1, data);
					} else {
						self.suppliers.unshift(data);
					}

					self.saveForm = {};
					self.editShow = false;
				},
				error: function (error) {
					if (error.responseJSON && error.responseJSON.error) {
						Toast.error(error.responseJSON.error);
					} else {
						Toast.error('保存失败');
					}
				}
			})
		},
		cancelEdit: function () {
			this.editShow = false;
			this.$set(this, 'saveForm', {});
		},
		deleteItem: function (item ,index) {
			var self = this;
			console.log(111);
			$.ajax({
				url: '/admin/supplier/delete/'+item.id,
				type: 'post',
				success: function () {
					Toast.success('删除成功');
					self.suppliers.splice(index, 1);
				},
				error: function () {
					Toast.error('删除失败');
				}
			})
		}
	}
})
</script>